<template>
    <div class="app-nav">
        <image v-if="showBack" style="width: 35px;height: 44px;position: absolute;left: 30px;top: 23px;"
               src="/resource/img/back.png" alt="" @click="back()"></image>
        <text v-if="showTitle" class="title">{{title}}</text>
        <image v-if="showLogo"
               style="width: 188px;height: 41px;margin-top: 23px;margin-left: 278px"
               src="/resource/img/logo.png" alt=""></image>
        <image v-if="showPhoto" style="width: 50px;height: 50px;border-radius: 30px;position: absolute;left: 14px;top: 16px;" src="/resource/img/img.jpg" alt="" @click="jump('/login')"></image>
        <image v-if="showMore"
               style="width: 5px;height: 42px;position: absolute;right: 30px;top: 23px;"
               src="/resource/img/more.png" alt=""></image>
        <image v-if="showMsg"
               style="width: 38px;height: 33px;position: absolute;right: 120px;top: 23px;"
               src="/resource/img/msg-w.png" alt=""></image>
        <image v-if="showUser"
               style="width: 36px;height: 32px;position: absolute;right: 30px;top: 23px;"
               src="/resource/img/user.png" alt=""></image>

    </div>
</template>

<style scoped>
     .title{
        text-align: center;
        font-size: 36px;
        color: #fff;
        padding-top:20px;
    }
    .app-nav{
        position: fixed;
        right: 0;
        left: 0;
        top:0;
        width: 750px;
        height: 88px;
        border-top-color: #f0f0f0;
        border-top-width: 1px;
        border-top-style: solid;
        background-color: #42b7ff;
    }

</style>

<script>
    import mixins from '../mixins'
    var navigator = weex.requireModule('navigator')

    export default{
        mixins:[mixins],
        props:{
            title:String,
            showBack:Boolean,
            showPhoto:{
                type:Boolean,
                default:false
            },
            showMore:{
                type:Boolean,
                default:false
            },
            showMsg:{
                type:Boolean,
                default:false
            },
            showUser:{
                type:Boolean,
                default:false
            },
            showTitle:{
                type:Boolean,
                default:true
            },
            showLogo:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            back:function(){
                navigator.pop();
            }
        },
        data: function () {
          return {
          }
        }

    }

</script>
